<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="avatar" label="头像" width="120px">
      <!-- <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.date }}</span>
      </template> -->
    </el-table-column>
    <el-table-column prop="username" label="用户名称" align="center">
      <template slot-scope="scope">
        <svg-icon
          icon-class="nickname"
          style="margin-right: 10px; font-size: 20px"
        />{{ scope.row.username }}
      </template>
    </el-table-column>
    <el-table-column prop="nickname" label="昵称" align="center">
      <template slot-scope="scope">
        <svg-icon
          icon-class="nickname"
          style="margin-right: 10px; font-size: 20px"
        />{{ scope.row.nickname }}
      </template>
    </el-table-column>
    <el-table-column prop="remark" label="个性签名" align="center">
      <template slot-scope="scope">
        <svg-icon
          icon-class="remark"
          style="margin-right: 10px; font-size: 20px"
        />{{ scope.row.remark }}
      </template>
    </el-table-column>
    <el-table-column prop="gender" label="性别" align="center">
      <template slot-scope="scope">
        <svg-icon
          icon-class="gender"
          style="margin-right: 10px; font-size: 20px"
        />{{ scope.row.gender }}
      </template>
    </el-table-column>
    <el-table-column prop="email" label="邮箱" align="center">
      <template slot-scope="scope">
        <svg-icon
          icon-class="email"
          style="margin-right: 10px; font-size: 20px"
        />{{ scope.row.email }}
      </template>
    </el-table-column>
    <el-table-column prop="phone" label="电话号码" align="center">
      <template slot-scope="scope">
        <svg-icon
          icon-class="phone"
          style="margin-right: 10px; font-size: 20px"
        />{{ scope.row.phone }}
      </template>
    </el-table-column>
    <el-table-column prop="create_time" label="创建时间" align="center">
      <template slot-scope="scope">
        <svg-icon
          icon-class="time"
          style="margin-right: 10px; font-size: 20px"
        />{{ scope.row.create_time }}
      </template>
    </el-table-column>
    <el-table-column prop="update_time" label="更新时间" align="center">
      <template slot-scope="scope">
        <svg-icon
          icon-class="time"
          style="margin-right: 10px; font-size: 20px"
        />{{ scope.row.update_time }}
      </template>
    </el-table-column>
    <el-table-column label="操作" width="150px">
      <template slot-scope="scope">
        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
          >编辑</el-button
        >
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { selectAllUser } from "@/api/user";
export default {
  name: "User",
  data() {
    return {
      tableData: [],
      currPage: 1,
      pageSize: 8,
      pageNums: 10,
      dialogVisible: false,
      currBlog: {},
    };
  },
  methods: {
    loadData() {
      selectAllUser(this.currPage, this.pageSize)
        // 成功请求
        .then((response) => {
          this.tableData = response.pageData;
          this.pageNums = response.pageNums * 10;
        })
        // 失败请求
        .catch((error) => {
          console.log(error);
        });
    },
    handleCurrentChange(val) {
      this.currPage = val;
      this.loadData();
    },
    // indexMethod(index) {
    //   return index + (this.currPage - 1) * this.pageSize + 1;
    // },
  },
  created() {
    this.loadData();
  },
};
</script>

<style scoped></style>
